<template>
  <div class="Echarts">
    <div id="bintu" style="width: 300px;height: 240px;" />
  </div>
</template>

<script>
export default {
  name: 'Echarts',
  mounted() {
    this.myEcharts()
  },
  methods: {
    myEcharts() {
      var myChart = this.$echarts.init(document.getElementById('bintu'))
      // 配置图表
      var option = {

        tooltip: {
                trigger: 'item', //触发类型:item是图形触发，axis是坐标轴触发，none是什么都不触发
                formatter: '{a} <br/>{b} : {c} ({d}%)', //提示框浮层内容格式器，支持字符串模板和回调函数两种形式
            },

            series: [
                {
                    name: 'Nightingale Chart',
                    type: 'pie',
                    radius: [10, 60],
                    center: ['40%', '50%'],
                    roseType: 'area',
                    labelLine: {
                        length: 1,
                        length2: 2,
                    },
                    itemStyle: {
                        borderRadius: 1,
                    },
                    data: [
                        { value: 320, name: '前端' },
                        { value: 240, name: 'java' },
                        { value: 150, name: 'PYTH' },
                        { value: 100, name: 'C++' },
                        { value: 65, name: 'UI' },
                    ],
                },
            ],      }
      myChart.setOption(option)
    }
  }
}
</script>

  <style>

  </style>

